﻿// FIELD CONTROLS
var dateFormat = 'mm/dd/yy';

BaseFieldControl = function ($control) {
    if ($control == undefined)
        return;
    this.$this = $control;
    this.Me = this;
};
BaseFieldControl.prototype.setData = function () { };
BaseFieldControl.prototype.getData = function () { };

// TextBoxFieldControl
TextBoxFieldControl = function ($control) {
    if ($control == undefined)
        return;
    BaseFieldControl.prototype.constructor.call(this, $control);
    this.$this.html('<input class="textboxfield" type="text"/>');
};
TextBoxFieldControl.prototype = new BaseFieldControl();
TextBoxFieldControl.prototype.constructor = TextBoxFieldControl;

TextBoxFieldControl.prototype.setData = function (data) {
    this.$this.find('input').val(data);
};

TextBoxFieldControl.prototype.getData = function () {
    return this.$this.find('input').val();
};

// DatePickerFieldControl
DatePickerFieldControl = function ($control) {
    if ($control == undefined)
        return;
    TextBoxFieldControl.prototype.constructor.call(this, $control);
    this.$this.children('input').datepicker({ dateFormat: dateFormat });
};
DatePickerFieldControl.prototype = new TextBoxFieldControl();
DatePickerFieldControl.prototype.setData = function (data) {
    if (!(data instanceof Date))
        data = new Date(data);

    this.$this.children('input').datepicker('setDate', data);
};
DatePickerFieldControl.prototype.getData = function () {
    return this.$this.children('input').datepicker('getDate');
};

// PhoneNumberFieldControl
PhoneNumberFieldControl = function ($control) {
    if ($control == undefined)
        return;
    TextBoxFieldControl.prototype.constructor.call(this, $control);

    this.$this.children('input').mask('(999) 999-9999');
};
PhoneNumberFieldControl.prototype = new TextBoxFieldControl();


// ComboboxFieldControl
ComboboxFieldControl = function ($control, ds) {
    if ($control == undefined)
        return;
    BaseFieldControl.prototype.constructor.call(this, $control);
    this.$this.html('<select></select>');

    if (ds == undefined)
        return;
    var sel = this.$this.children('select');

    for (var i = 0; i < ds.length; i++) {
        sel.append('<option value="@value">@display</option>'
            .replace("@value", ds[i].Id)
            .replace("@display", ds[i].Value)
        );
    }
};
ComboboxFieldControl.prototype = new BaseFieldControl();
ComboboxFieldControl.prototype.constructor = ComboboxFieldControl;
ComboboxFieldControl.prototype.setData = function (data) {
    this.$this.children('select').val(data);
};
ComboboxFieldControl.prototype.getData = function () {
    return this.$this.children('select').val();
};


// MultiTextBoxFieldControl
MultiTextBoxFieldControl = function ($control) {
    if ($control == undefined)
        return;
    BaseFieldControl.prototype.constructor.call(this, $control);
    var me = this;

    function deleteElement() {
        $(this).parent().remove();
        me.setAddRemoveClass();
    }

    this.addElements = function (dataArray) {
        if (dataArray == undefined || dataArray.length == 0)
            return;
        me.$this.html('');
        for (var i = 0; i < dataArray.length; i++) {
            me.addElementWithData(dataArray[i]);
        }
    };

    function installAddDeleteButton() {
        me.$this.find('.deleteElement').unbind('click');
        me.$this.find('.addElement').unbind('click');

        me.$this.find('.deleteElement').bind('click', deleteElement);
        me.$this.find('.addElement').bind('click', _addElement);
    }

    function _addElement() {
        me.addElement();
    }

    this.setAddRemoveClass = function () {
        var buttons = me.$this.find('.multiFieldTriggerButton');
        buttons.removeClass('addElement');
        buttons.removeClass('deleteElement');
        buttons.addClass('deleteElement');
        $(buttons[buttons.length - 1]).removeClass('deleteElement');
        $(buttons[buttons.length - 1]).addClass('addElement');
        installAddDeleteButton();
        me.onElementChanged();
    };
    
    me.addElement();
};

MultiTextBoxFieldControl.prototype = new BaseFieldControl();
MultiTextBoxFieldControl.prototype.constructor = MultiTextBoxFieldControl;
MultiTextBoxFieldControl.prototype.onElementChanged = function (evt) { };

MultiTextBoxFieldControl.prototype.addElementWithData = function (data) {
    var val = data == undefined ? '' : 'value="' + data + '"';
    this.$this.append('<div class="multiFieldContainer"><input class="textboxfield multiFieldElementControl" type="text" @value/><span class="multiFieldTriggerButton flatStyle"><span class="ui-icon"></span></span></div>'.replace('@value', val));
    this.setAddRemoveClass();
};

MultiTextBoxFieldControl.prototype.addElement = function () {
    this.addElementWithData();
};

MultiTextBoxFieldControl.prototype.setData = function (dataArray) {
    this.addElements(dataArray);
};
MultiTextBoxFieldControl.prototype.getData = function () {
    var output = [];
    this.$this.find('input').each(function () {
        var val = $(this).val();
        if (val != undefined && val != '')
            output.push(val);
    });
    return output;
};

// MultiDatePickerFieldControl
MultiDatePickerFieldControl = function ($control) {
    if ($control == undefined)
        return;

    MultiTextBoxFieldControl.prototype.constructor.call(this, $control);
};

MultiDatePickerFieldControl.prototype = new MultiTextBoxFieldControl();
MultiDatePickerFieldControl.prototype.onElementChanged = function (evt) {
    this.$this.find('.multiFieldElementControl').datepicker();
};
MultiDatePickerFieldControl.prototype.addElementWithData = function (data) {
    var tmp = Utils.guid();

    var val = data instanceof Date ? data : new Date(data);
    this.$this.append('<div class="multiFieldContainer"><input id="@id" class="textboxfield multiFieldElementControl" type="text" @value/><span class="multiFieldTriggerButton flatStyle"><span class="ui-icon"></span></span></div>'.replace('@id', tmp));
    this.setAddRemoveClass();

    var $item = $(this.$this.find('#' + tmp));
    $item.datepicker('setDate', val);
    //$item.removeAttr('id');
};
MultiDatePickerFieldControl.prototype.getData = function () {
    var output = [];
    this.$this.find('input').each(function () {
        var val = $(this).datepicker('getDate');
        output.push(val);
    });
    return output;
};